<template>
  <div class="card">
    <div class="posts">
      <slot name="header"></slot>
      <div class="list" v-if="topic&&topic.data&&topic.data.length>0">
        <PostItem v-for="item in topic.data" :key="item.id" :item="item"/>
      </div>
      <el-empty v-else description="没有数据"></el-empty>
    </div>
    <slot name="footer">
      <Pagination v-if="paginator"
                  :pages="paginator.pages"
                  :current="parseInt(paginator.current)"
                  :route="{name:routeName,params:routeParams}"
      />
    </slot>
    <Login :visible="visible" @close="visible=false"></Login>
  </div>
</template>

<script>
import Card from "./Card";
import PostItem from "./PostItem";
import Login from "./Login";

import api from "@/utils/api.js"

export default {
  name: "Posts",
  components: {Login, PostItem, Card},
  props: {
    topic: {
      type: Object,
      default: () => null
    }
  },
  computed: {
    routeName() {
      let name = this.$route.name;
      return {
        'index-page': 'index-page',
        'index': "index-page",
        'node': "node-page",
        "node-page": "node-page"
      }[name];
    },
    routeParams() {
      let routeName = this.$route.name;
      let data = {
        node: {
          id: this.$route.params.id
        },
        'node-page': {
          id: this.$route.params.id
        }
      }
      return data[routeName] || {};

    },
    paginator() {
      if (this.topic) {
        return this.topic.paginator
      }
      return null;
    }
  },
  data() {
    return {
      count: 10,
      visible: false
    }
  },
  created() {

  }
}

</script>

